<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>单据中心</title>
    <link rel="stylesheet" href="../../../../css/twocss/public.css">
    <link rel="stylesheet" href="../../../../public/dist/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../../css/twocss/avoucher.css">
    <link rel="stylesheet" href="../../../../public/font/iconfont.css">
</head>

<body>
    <div class="vou-com">
        <div class="vou-top">
            <div class="vou-operation layui-bg-red">
                <div><i class="iconfont icon-xunhuan" size="13"></i> </div>
                <p>未处理</p>
                <span>0</span>
            </div>

            <div class="vou-operation layui-bg-orange">
                <div><i class="iconfont icon-xunhuan" size="13"></i> </div>
                <p>处理中</p>
                <span>0</span>
            </div>

            <div class="vou-operation layui-bg-green">
                <div><i class="iconfont icon-xunhuan" size="13"></i> </div>
                <p>已处理</p>
                <span>0</span>
            </div>
        </div>
        <div class="vou-choose">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin:0;">
                <ul class="layui-tab-title" style="background-color:#eeeeee;">
                    <li class="layui-this select-type-item select-type-show">全部</li>
                    <li class="select-type-item">未处理</li>
                    <li class="select-type-item">处理中</li>
                    <li class="select-type-item">已处理</li>
                </ul>
                <div class="layui-tab-content" style="">
                    <!-- <div class="layui-tab-item layui-show">
                        <div class="vou-patrol">
                            <div class="layui-form">
                                <div class="layui-form-item" style="margin:0;">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">日期:</label>
                                        <div class="layui-input-inline">
                                            <input type="text" class="layui-input" id="test6">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">单号:</label>
                                        <div class="layui-input-inline">
                                            <input type="text" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">关键字:</label>
                                        <div class="layui-input-inline" style="width: 150px;">
                                            <input type="text" class="layui-input">
                                        </div>
                                    </div>
                                    <button class="layui-btn  layui-bg-red">查询</button>
                                    <button class="layui-btn layui-bg-red layui-btn-sm">重置</button>
                                </div>
                            </div>

                            <div class="vou-date">
                                <table id="alldemo" lay-filter="test1" style="height:100%;"></table>
                            </div>
                        </div>
                    </div> -->
                    <!-- <div class="layui-tab-item">内容2</div>
                    <div class="layui-tab-item">内容3</div>
                    <div class="layui-tab-item">内容4</div> -->


                </div>
                <div class="vou-patrol">
                    <div class="layui-form-item" style="margin:0;">
                        <!-- <div class="layui-inline">
                            <label class="layui-form-label">日期:</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="test6">
                            </div>
                        </div> -->
                        <div class="layui-inline" style="margin:0;">
                            <label class="layui-form-label">单号:</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" search-type="s1" id='s1' placeholder="请输入详细单号">
                            </div>
                        </div>
                        <!-- <div class="layui-inline" style="margin:0;">
                            <label class="layui-form-label">关键字:</label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <input type="text" class="layui-input" name="s2" search-type="s2" id="s2">
                            </div>
                        </div> -->
                        <div class="layui-form-item" style="display: none">
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <input type="text" name="s3"  class="layui-input" search-type="s3" id="s3">
                                </div>
                            </div>
                        </div>
                        <button class="layui-btn  layui-bg-red" lay-event="search">查询</button>
                        <button class="layui-btn layui-bg-red " lay-event="reset">重置</button>
                        
                    </div>
                </div>



                <div class="common-padding" style="margin-top: 20px;">
                    <table class="layui-hide" id="testdome" lay-filter="testdome"></table>
                </div>
        
            </div>
        </div>
    </div>
    <script src="../../../../public/dist/layui.js"></script>
</body>

</html>

<!-- 头部 -->
<script type="text/html" id="toolbarinter">
    <div class="layui-btn-container ">
        <button class="layui-btn  layui-btn-sm colors" lay-event="add"><i class="layui-icon"></i></i>添加</button>
        <button class="layui-btn  layui-btn-sm colors" lay-event="update"><i class="layui-icon"></i>编辑</button>
        <button class="layui-btn  layui-btn-sm colors" lay-event="delete"><i class="layui-icon"></i>删除</button>
    </div>
</script>
<script src="../../../../js/common/jquery.min.js"></script>
<script src="../../../../js/common/api.js"></script>
<script>
    layui.use(['element', "laydate", "table"], function() {
        var $ = layui.jquery,
            element = layui.element, //Tab的切换功能，切换事件监听等，需要依赖element模块
            laydate = layui.laydate,
            table = layui.table;
        //时间
        laydate.render({
            elem: '#test6',
            range: true,
            theme: 'molv',
            done: function(value, date) {
                console.log('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
            }
        });
        //选择卡
        element.on('tab(docDemoTabBrief)', function(data) {
            console.log(this); //当前Tab标题所在的原始DOM元素
            console.log(data.index); //得到当前Tab的所在下标
            console.log(data.elem); //得到当前的Tab大容器
            console.log(data);
        });

        layui.config({
            base: '../../../../js/module/'
        }).use(['Services','jquery'],function () {
            var $  = layui.jquery;
            var seeType='';
            var dataType = 'myvour';
            var typeItem = document.querySelectorAll('.select-type-item');
            for(var i=0;i<typeItem.length;i++){
                (function(i){
                    typeItem[i].addEventListener('click',function(){
                        document.querySelector('.select-type-show').classList.remove('select-type-show');
                        typeItem[i].classList.add('select-type-show');
                        if(i==0){
                            seeType='';
                            document.querySelector('#s3').value='';
                            getServices();

                        }else{
                            seeType=i;
                            document.querySelector('#s3').value=seeType;
                            getServices();
                        }
                    })
                })(i)
            }
            getServices();
            function getServices(){
                
                var services = new layui.Services({
                    baseURL:baseaip,
                    tableId:"testdome",
                    toolbar:"#toolbarinter",
                    serachUrl:"dictionaries/query",
                    getUrl:"dictionaries/get",
                    delUrl:"dictionaries/delete",
                    updUrl:"plant/updateNcpxx",
                    saveUrl:"./dialog/voucherDialog.html",
                    deleteField:"id",
                    dataType:dataType,
                    parameter:{
                        keyword:document.querySelector('#s1').value+'|'+seeType,
                        type:dataType
                    },
                    cols:[[
                        {type: 'checkbox', fixed: 'left'},
                        {field: 's1', sort: true, title: '单号',templet:function (data) {

                                return (JSON.parse(data.context)).s1
                        }},
                        {field: 's4', sort: true, title: '时间',templet:function (data) {
                            
                            return (JSON.parse(data.context)).s4
                        }},
                        {field: 's2', sort: true, title: '原因',templet:function (data) {
                            
                            return (JSON.parse(data.context)).s2
                        }},
                        {field: 's5', sort: true, title: '处理人',templet:function (data) {
                            
                            return (JSON.parse(data.context)).s5
                        }},
                        
                        {field: 's3', sort: true, title: '状态',templet:function (data) {
                            var ret = ''
                            if((JSON.parse(data.context)).s3==1){
                                ret = '未处理'
                            }else if((JSON.parse(data.context)).s3==2){
                                ret = '处理中'

                            }else if((JSON.parse(data.context)).s3==3){
                                ret = '已处理'

                            }else if((JSON.parse(data.context)).s3==0){
                                ret = '全部'

                            }
                            return ret
                        }},
                    ]],
                });
            }
            
        });
    });
</script>